<div row class="service-title" ng-if="service">
  <div class="service-name truncate">
    <span class="pficon pficon-service" aria-hidden="true" title="Service"></span>
    <span class="sr-only">Service</span>
    <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
    <!-- Put the linking button next to the service name if we show traffic percent to the right. -->
    <span ng-if="!isAlternate && alternateServices.length && !isChild && ('services' | canI : 'update')"
          class="small mar-left-sm mar-right-sm">
      <ng-include src="'views/overview/_service-linking-button.html'"></ng-include>
    </span>
  </div>
  <div ng-if="alternateServices.length && !isChild" class="service-metadata">
    <ng-include src="'views/overview/_traffic-percent.html'"></ng-include>
  </div>
  <!-- Show the button in the upper right corner if we're not showing traffic percent there. -->
  <div ng-if="(!alternateServices.length || isChild) && ('services' | canI : 'update')">
    <ng-include src="'views/overview/_service-linking-button.html'"></ng-include>
  </div>
</div>
